<template>
  <base-view :model="query" @submit="search" class="custom">
    <template v-slot:params>

     <a-col :span="8" v-show="query.instId!=''">
        <a-form-model-item label="收单机构号">
          <a-input
            placeholder="请输入收单机构号"
            v-model="query.acqInstCode"
          />
        </a-form-model-item>
      </a-col>

      <a-col :span="8" v-show="query.instId!=''">
              <a-form-item
                label="批次日期">

                 <range-date
                  placeholder="请选择日期"
                  @change="handleDateChange" valueFormat="YYYYMMDD" format="YYYYMMDD">
                  </range-date>
              </a-form-item>
      </a-col>

      <a-col :span="24" v-show="query.instId!=''">
        <a-button type="primary" html-type="submit">查询</a-button>
        <a-button style="margin-left: 8px" html-type="reset" @click="reset">重置</a-button>
      </a-col>

    </template>
    <div class="section">
      <div class="btn-group">
        <!-- <a-button type="primary" @click="openModal()">
          <a-icon type="plus" />
          <span>增加</span>
        </a-button> -->
        <a-button type="primary" @click="exportExcel()">导出</a-button>
      </div>

      <a-table
        ref="table"
        :columns="columns"
        :dataSource="dataSource"
        :rowKey="
          (record, index) => {
            return index;
          }
        "
        @change="pageChange"
        @showSizeChange="pageChange"
        :loading="loading"
        :pagination="pagination"
        :scroll="{ x: 1500 }"
      >
        <template slot="operation" slot-scope="text, record">
          <a-icon type="setting" theme="twoTone" twoToneColor="#4a9ff5" @click="edit(record)" v-if="record.mchntLevelStatus !== '02' && record.mchntLevelStatus !== '03'" title="修改" v-has-permission="['OrgChargeReport:update']"></a-icon>
          <a-icon type="eye" theme="twoTone" twoToneColor="#4a9ff5" @click="view(record)" title="详情" v-has-permission="['OrgChargeReport:view']"></a-icon>
          <a-icon type="delete" theme="twoTone" twoToneColor="#4a9ff5" title="注销"  v-if="record.mchntLevelStatus !== '03'" @click="cancel(record)" v-hasPermission="['agentInfo:delete']"></a-icon>
          <a-badge
            status="warning"
            text="无权限"
            v-has-no-permission="[
              'OrgChargeReport:view',
              'OrgChargeReport:update',
              'OrgChargeReport:delete',
            ]"
          ></a-badge>
        </template>
      </a-table>
    </div>
    <a-modal
      v-model="modalVisible"
      :title="modalTitle"
      width="1050px"
      @ok="submit"
      :maskClosable="false"
      :footer="isHideFoot?null:undefined"
    >
      <mchnt-level-operation ref="modalForm" />
    </a-modal>
  </base-view>
</template>

<script>
import RangeDate from '@/components/datetime/RangeDate'
export default {
  name: "OrgChargeReport",
  components: {RangeDate},
  data() {
    return {
      form: this.$form.createForm(this),
      beanInfo: {},
      modalVisible: false,
      isHideFoot: false,
      modalTitle: "",
      operationType: "add",
      //排序
     sortedInfo: null,
      //时间变量
      timeForm: [],
      //查询数据
      query: { instId: "", batchDate: "", acqInstCode: "", feeIncome: "", cupsFee: "",
               startDate: "",endDate: ""
               },
      loading: false,
      //分页
      pagination: {
        pageNum: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30", "40", "100"],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`,
      },
      //标题
      columns: [
        {
          title: "法人行号",
          dataIndex: "instId",
          width: 200,
        },
        {
          title: "批次日期",
          dataIndex: "batchDate",
          width: 200,
        },
        {
          title: "收单机构号",
          dataIndex: "acqInstCode",
          width: 200,
        },
        {
          title: "手续费收益(元)",
          dataIndex: "feeIncome",
          width: 200,
        },
        {
          title: "银联手续费(元)",
          dataIndex: "cupsFee",
          width: 200,
        },
        // {
        //   title: "操作",
        //   scopedSlots: { customRender: "operation" },
        //   fixed: "right",
        //   width: 120,
        // },
      ],
      //数据源
      dataSource: [],
    };
  },
  methods: {
    async submit() {
      const res = await this.$refs.modalForm.submit();
      if (res) {
        this.modalVisible = false;
        this.pagination.defaultCurrent = 1;
        await this.search();
      }
    },
    async reset(){
      this.query = {instId:this.query.instId}
      this.pagination.pageNum = this.pagination.defaultCurrent;
      this.pagination.pageSize = this.pagination.defaultPageSize;
      await this.search();
    },
    async search(e) {
      e && e.preventDefault && e.preventDefault();
      try {
        //访问路径 接口
        const res = await this.$get("/admin/csmc/OrgChargeReport/list", {
          //属性赋值
          instId: this.query.instId,
          batchDate: this.query.batchDate,
          acqInstCode: this.query.acqInstCode,
          feeIncome: this.query.feeIncome,
          cupsFee: this.query.cupsFee,
          //分页参数
          pageNum: this.pagination.pageNum,
          pageSize: this.pagination.pageSize,
          //时间
          startDate:this.query.startDate,
          endDate:this.query.endDate,

        });
        this.dataSource = res.data.rows;
        this.$set(this.pagination, "total", +res.data.total);
      } catch (e) {
        console.error(e);
      }
    },
    //时间
    handleDateChange (value) {
      console.log(value);
      if (value) {
        console.log(value[0]);
        console.log(value[0].replace("-","").replace("-",""));
        this.query.startDate =value[0].replace("-","").replace("-","")
        this.query.endDate = value[1].replace("-","").replace("-","")
      }
    },
    //导出
    exportExcel() {
        let {sortedInfo} = this
        let sortField, sortOrder
        // 获取当前列的排序和列的过滤规则
        if (sortedInfo) {
            sortField = sortedInfo.field
            sortOrder = sortedInfo.order
        }
        this.$export('/admin/csmc/OrgChargeReport/gridExport', {
            sortField: sortField,
            sortOrder: sortOrder,
            ...this.query
        })
    },
    openModal(type = "add", beanInfo) {
      this.modalTitle = {
        add: "新增",
        edit: "编辑",
        view: "详情",
        cancel: "注销",
      }[type];
      this.modalVisible = true;
      if(type === 'view'){
        this.isHideFoot = true;
      }else{
        this.isHideFoot = false
      }
      this.$nextTick(() => {
        this.$refs.modalForm.setOperatorType(type);
        if (type === "edit" || type === "view" || type === "cancel") {
          this.$refs.modalForm.setBeanInfo(beanInfo);
        }
        this.$refs.modalForm.resetFields(this.query.instId);
      });
    },
    async edit(item) {
      this.openModal("edit", item);
    },
    view(item) {
      this.openModal("view", item);
    },
    cancel(item) {
      this.openModal("cancel", item);
    },

    pageChange(e) {
      this.pagination.pageNum = e.current;
      this.pagination.pageSize = e.pageSize;

      this.search();
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../../../../static/less/Common";
</style>
